<%--
  Created by IntelliJ IDEA.
  User: benhailong
  Date: 2018/2/7
  Time: 下午3:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改通讯录</title>
    <link rel="stylesheet" href="<%=basePath%>templates/style/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=basePath%>templates/style/build/css/doc.css" media="all">
    <script src="<%=basePath%>templates/style/plugins/layui/layui.js"></script>
    <script src="<%=basePath%>templates/style/plugins/layui/jquery-3.3.1.min.js"></script>
</head>
<body>

<div class="kit-doc">
    <form class="layui-form layui-form-pane" action="">

        <input name="id" value="${kitModel.id}" type="hidden">

        <div class="layui-form-item" style="">
            <label class="layui-form-label">所在地</label>
            <div class="layui-input-inline">
                <select name="area"  lay-search="" lay-verify="required">
                    <option value="">请选择所在地</option>
                    <option value="1" <c:if test="${kitModel.area==1}">selected</c:if>>北京</option>
                    <option value="2"<c:if test="${kitModel.area==2}">selected</c:if>>上海</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" >
            <label class="layui-form-label" style="height: 137px; line-height: 117px">图片</label>
            <input name="imgUrl" id="imgurl" value="${kitModel.imgUrl}" autocomplete="off" class="layui-input" type="hidden">
            <div class=" layui-upload-drag" id="img" style="border-left: 0px;" >
                <i class="layui-icon">&#xe654;</i>
                <p>点击上传图片</p>
                <img id="demo1" style="position: absolute;height: 137px;width: 137px;margin: -106px auto auto -70px" src="<%=basePath%>${kitModel.imgUrl}"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input name="name" id="name" value="${kitModel.name}" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <input name="group" id="group" value="${kitModel.group}" lay-verify="required" placeholder="请输入部门" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-block">
                <input name="loginId" id="loginId" value="${kitModel.loginId}" lay-verify="required" placeholder="请输入工号" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">分机号</label>
            <div class="layui-input-block">
                <input name="place" id="place" value="${kitModel.place}" lay-verify="required" placeholder="请输入分机号" autocomplete="off" class="layui-input" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
        </div>
    </form>

    <!--这里写页面的代码-->
</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'layer', 'upload'], function(){
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#img'
            , url: '<%=basePath%>/apiCommon/setImage.do'
            , field: 'layuiFile'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result, data) {
                    $('#demo1').css('display','block').attr('src', result); //链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                if(res.code == 0){
                    $('#imgurl').val(res.data.src);
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        //监听提交，发送请求
        form.on('submit(add)', function(data){
            $.post("<%=basePath%>addressList/update.do",data.field,function(data){
                var result = eval('('+data+')');
                // 获取 session
                if(result.code!=200){
                    layer.alert(result.msg, {offset: 't',icon: 5});
                }
                if(result.code==200){
                    layer.alert(result.msg, {offset: 't',icon: 6});
                }
            });
            return false;
        });
    });






</script>
</body>
</html>
